import React, { Component } from 'react';
import { connect, } from 'react-redux';
import moment from 'moment';
import request from '../api/request'
import { appid, getUrl, getCode, openSherd, setSherd } from '../utils/utils'
import { SET_USER, SET_GAME_INFO } from '../actions/actions'

class Home extends Component {

  constructor(props) {
    super(props)
    this.state = {
      show: false
    }
  }

  changeRules = () => {
    const { show } = this.state
    this.setState({
      show: !show
    })
  }

  componentDidMount() {
    const { dispatch, user } = this.props
    setSherd(user.openid, dispatch)
    request.projectInfo({ id: 1 }).then(res => {
      dispatch({
        type: SET_GAME_INFO,
        data: res.data
      })
    })
    let login = localStorage.getItem('login')
    this.setState({
      show: false
    })
    if (login) {
      login = JSON.stringify(login)
      // 判断当前时间是不是 login 后面的时间，
      if (moment().isAfter(login, 'day')) {
        this.setState({
          show: true
        })
      } else {
        this.setState({
          show: false
        })
      }
    } else {
      this.setState({
        show: true
      })
    }
    localStorage.setItem('login', moment().format('YYYY-MM-DD'))
  }

  componentWillUnmount() {
    this.setState({
      show: false
    })
  }

  remderRules() {
    const { gameInfo } = this.props
    const { show } = this.state
    console.log(gameInfo)
    if (show) {
      return (
        <div className="rules">
          <div className="card">
            <img className="title" src={require('../static/image/title-dtxz.png')} alt="" />
            <div className="card-title">
              <p>欢迎加入<span>卡墨尤尼「脑力王者」挑战赛</span>！全国脑力知识竞赛正式开始了，各位脑力大咖们都要加油呀~关注「卡墨尤尼创意科技」微信公众号，抢占答题先机！</p>
            </div>
            {gameInfo && gameInfo.info ? <div className="card-box" dangerouslySetInnerHTML={{ __html: gameInfo.info }} /> : null}
            {/* <div className="card-box" dangerouslySetInnerHTML={{ _html: gameInfo.info }}>
              <p>{gameInfo.info}</p>
              <p><span>活动奖品：</span></p>
              <p>一等奖1名，全国排行榜第1名，VR 3D眼镜 二等奖2名，全国排行榜2-3名，联名密码箱三等奖3名，全国积分排行榜4-6名，乐高拼图。</p>
              <p><span>活动时间：</span></p>
              <p>主办单位：卡墨尤尼</p>
              <p><span>规则说明：</span></p>
              <p>1、每天每个账号只可以参加一次答题；每天  首次分享可增加1次答题机会</p>
              <p>2、连续答题每天额外奖励积分，连续答题第2天奖励5分；连续答题第3天7分；连续答题第4天及以上每天奖励10分，中断答题从0算起。</p>
              <p>3、活动时间内累计积分达2500分可上全国排行榜，且排名前6名的可获得豪华大奖</p>
              <p>4、活动奖品领取方式：活动结束后的一个月内，凭借个人活动页面积分到卡墨尤尼望京校区现场领取奖品（卡墨尤尼望京校区地址：北京市朝阳区望京街10号望京SOHO T2-B-2806 ，咨询热线：010-57262885）</p>
              <p>5、卡墨尤尼内部员工禁止参与。</p>
              <p>6、本活动最终解释权归卡墨尤尼所有。</p> 
            </div> */}
            <div className="close" onClick={this.changeRules}>
              <img src={require('../static/image/title-dtxz-btn.png')} alt="" />
            </div>
          </div>
        </div>
      )
    }
  }

  render() {
    const { user, dispatch } = this.props
    return (
      <div className="home">
        <div className="title"><img src={require('../static/image/home-top.png')} alt="" /></div>
        <div className="home-content">
          <div className="home-tx">
            <div className="home-tx-feitie"><img src={require('../static/image/toux.png')} alt="" /></div>
            <div className="home-tx-pic" onClick={() => this.props.history.push('/questions/integral')}>
              <img src={user.headimgurl} alt="" />
            </div>
          </div>
          <div className="home-info">
            <p className="nickname">{user.nickname}</p>
            <p className="integral">累计分数:{user.integral}</p>
            <p className="answer"> 今日剩余答题次数:{user.answer}次</p>
          </div>
          <div className="home-btns">
            <div className="go" onClick={() => this.props.history.push('/questions/question')}><img src={require('../static/image/btn-lijidati.png')} alt="" /></div>
            <div className="jinnang" onClick={this.changeRules}>答题锦囊&gt;&gt;</div>
          </div>
          <div className="home-cell">
            <div className="icon" onClick={() => this.props.history.push('/questions/list')}><img src={require('../static/image/icon-paihangbang.png')} alt="" /></div>
            <div className="icon" onClick={() => openSherd(dispatch)}><img src={require('../static/image/icon-fxhaoyou.png')} alt="" /></div>
          </div>
        </div>
        {/* <div className="home-bottom"><img src={require('../static/image/home-bottom.png')} alt="" /></div> */}
        {this.remderRules()}
      </div>
    );
  }
}


export default connect(({ user, code, gameInfo }) => ({
  user,
  code,
  gameInfo
}))(Home);
